

<template>
  <div>
    <v-touch v-on:swiperight="onSwipeRight" :swipe-options="{direction: 'horizontal'}">
    <div style="z-index:999;position:fixed;width:100%">
    <x-header :left-options="{backText:'', preventGoBack: 'true'}"
    @on-click-back="$router.go(-1)">
      <span class="phoneBook">通讯录</span>
    </x-header>
    <div>
      <simple-search @onClear="onClear" @onSearch="onSearch" placeholder="输入名称或关键词"></simple-search>
    </div>
    </div>
    <div style="margin-top: 96px;position:absolute;width:100%" class="person-list">
      <ul>
        <li v-for="(item,index) in list"  :key="index"  @click="getPersonsInDept(item.DEPT,index)" class="dept" v-if="!isSearch">
          <div class="dept_div">
            <img src="@/assets/img/dept.png/" style="width:20px;height:20px">
            <span style="margin-left:10px">{{item.DEPT}}</span>
          </div>
           <ul v-show="activeIndex === index && showContent">
            <li v-for="(item1,index1) in userList" :key="index1" class="user" @click="openInfo(item1)">
              <div v-if="item1.url == '' || item1.url == undefined">
                    <div class="no_photo" v-if="item1.USERNAME.length < 3">
                        {{item1.USERNAME}}    
                    </div>
                    <div class="no_photo" v-else> 
                        {{item1.USERNAME.substring(0,1)}}
                    </div>
                </div>
                <div v-else>
                    <img :src="item1.url" class="photo"/>
                </div>
              <span style="margin-left:10px">{{item1.USERNAME}}</span>
            </li>
          </ul>
          <!-- <div class="sup"></div> -->
        </li> 
         <li v-for="(item,index) in list"  :key="index"  @click="hideUserInDept(index)" class="dept" v-if="isSearch">
           <div class="dept_div">
            <img src="@/assets/img/dept.png/" style="width:20px;height:20px">
            <span style="margin-left:10px">{{item}}</span>
           </div>
           <ul  :id="['ul'+index]">
            <li v-for="(item1,index1) in userList4[index]" :key="index1" class="user" @click="openInfo(item1)">
                <div v-if="item1.url == '' || item1.url == undefined">
                    <div class="no_photo" v-if="item1.USERNAME.length < 3">
                        {{item1.USERNAME}}    
                    </div>
                    <div class="no_photo" v-else> 
                        {{item1.USERNAME.substring(0,1)}}
                    </div>
                </div>
                <div v-else>
                    <img :src="item1.url" class="photo"/>
                </div>
              <span style="margin-left:10px">{{item1.USERNAME}}</span>
            </li>
          </ul> 
        </li> 
      </ul>
      <!-- <tree-root :list="isSearch?list:tree" :checkbox="false" name="NAME" children="children" :loadData="true" v-if="!isSearch"></tree-root>
      <tree-root :list="isSearch?list:tree" :checkbox="false" name="NAME" children="children" :loadData="true" v-if="isSearch" type="person"></tree-root> -->
      <!-- <tree-root :list="isSearch?list:tree"   :extend="isSearch" :checkbox="false"></tree-root> -->
    </div>
    <router-view style="height:100%;"></router-view>
    </v-touch>
  </div>
</template>

<script>
  import TreeRoot from "../../components/tree/treeRoot";
    export default {
        name: "addressBook",
      components: {TreeRoot},
      data(){
          return{
            isSearch:false,
            list:[],
            showContent:false,
            showInnerContent:false,
            searchList: [],
            userList:[],
            userList1:[],
            userList2:[],
            userList3:[],
            userList4:[],
            userList5:[],
            isClear:false,
            activeIndex : -1,
            activeIndex2 : true,
            keyword:"",
            
          }
      },
      mounted(){
        this.getDept();
      },
      methods:{
        onSwipeRight(){
          this.$router.go(-1)
        },
        //获取部门列表
        getDept(){
          this.$ajax({
            url: this.COMMON_URL,
            method: 'POST',
            // data : this.signMD5({
            //   _method:"PHONEBOOK.getDept"
            // })
             data : {
              _method:"PHONEBOOK.getDept"
            }
          }).then(res =>{
            console.log("phonebook")
            console.log(res)
            this.list = res.data.deptData
          })
        },
        //根据部门获取人员信息
        getPersonsInDept(dept,index){
          this.activeIndex = index
          this.showContent = !this.showContent
          console.log(dept);
          if(this.showContent){
                      //if(this.isSearch){
          this.$ajax({
                      url : this.COMMON_URL,
                      method : 'POST',
                      // data : this.signMD5({
                      //   _method : "PHONEBOOK.getUserByDept",
                      //   dept : dept
                      // })
                      data : {
                        _method : "PHONEBOOK.getUserByDept",
                        dept : dept
                      }
                    }).then(res =>{
                      console.log("getUserByDept",res)
                      this.getImgUrl(res);
                      // this.userList = res.data.userData

                    })
          //}
          }
        },
        //获取对应人员的头像信息
        getImgUrl(res){
          this.userList = [];
            this.userList1 = res.data.userData;
            for(let i=0;i<this.userList1.length;i++){
                this.$ajax({
                    url : this.COMMON_URL,
                    method : 'post',
                    // data : this.signMD5({
                    //     _method : "FIX_ACC_FILE_INFO.getFileWebPath",
                    //     fieldToken : this.userList1[i].PHOTO
                    // }),
                     data : {
                        _method : "FIX_ACC_FILE_INFO.getFileWebPath",
                        fieldToken : this.userList1[i].PHOTO
                    },
                    async : false,
                }).then(res=>{
                    console.log(res)
                    var length = res.data.data.length;
                    // console.log("length",length);
                    var imgUrlStr = "";
                    let data1 = this.userList1[i]
                    if(length > 0){
                        var data = res.data.data[0];
                        imgUrlStr = data.FileUrl;
                        if(imgUrlStr.indexOf("tmpfiledownlaod/qhszpm/") != -1){
                            imgUrlStr = process.env.BASE_URL + '/qhszpm/' + imgUrlStr.substring(imgUrlStr.indexOf("tmpfiledownlaod/qhszpm/"));
                        }
                        
                        data1['url'] = imgUrlStr
                    }
                    this.$set(this.userList, i ,data1)//给对象新增属性，让对象能实时响应
                })
            }
                
        },
        hideUserInDept(index){
          
          document.getElementById("ul"+index).style.display=this.activeIndex2==true?"none":"block";
          this.activeIndex2=!this.activeIndex2
        },
        showAllUser(value, index){
          this.sortUserInDept(value,index,this.keyword);
        },
        //在部门下搜索人员
        sortUserInDept(dept,index,keyword){
          this.$ajax({
             url : this.COMMON_URL,
                      method : 'POST',
                      // data : this.signMD5({
                      //   _method : "PHONEBOOK.sortUserInDept",
                      //   dept : dept,
                      //   keyword : keyword
                      // })
                      data : {
                        _method : "PHONEBOOK.sortUserInDept",
                        dept : dept,
                        keyword : keyword
                      }
                    }).then(res =>{
                      // this.userList = []
                      // this.userList = res.data.userData
                       this.getImgUrlSearch(res,index);
                  })
        },
        //在搜索的情况下获取人员头像信息
        getImgUrlSearch(res,index){
           this.userList4[index] = []
           this.userList5[index] = res.data.userData;
           console.log("res"+index,res)
            for(let i=0;i<this.userList5[index].length;i++){
                this.$ajax({
                    url : this.COMMON_URL,
                    method : 'post',
                    // data : this.signMD5({
                    //     _method : "FIX_ACC_FILE_INFO.getFileWebPath",
                    //     fieldToken : this.userList5[index][i].PHOTO
                    // }),
                    data : {
                        _method : "FIX_ACC_FILE_INFO.getFileWebPath",
                        fieldToken : this.userList5[index][i].PHOTO
                    },
                    async : false,
                }).then(res=>{
                  console.log("res"+index)
                    var length = res.data.data.length;
                    var imgUrlStr = "";
                    let data2 = this.userList5[index][i]
                    if(length > 0){
                        var data = res.data.data[0];
                        imgUrlStr = data.FileUrl;
                        if(imgUrlStr.indexOf("tmpfiledownlaod/qhszpm/") != -1){
                            imgUrlStr = process.env.BASE_URL + '/qhszpm/' + imgUrlStr.substring(imgUrlStr.indexOf("tmpfiledownlaod/qhszpm/"));
                        }
                        
                        data2['url'] = imgUrlStr
                    }
                    this.$set(this.userList4[index], i ,data2)//给对象新增属性，让对象能实时响应
                    if(index==this.list.length-1){
                      setTimeout(()=>{
                        this.isSearch = false;
                        this.isSearch = true;
                        console.log("result")
                      },500)
                      
                    }
                     
                })
                console.log(index)
            }
            
        
                
        },
        onClear(){
          this.isClear=true;
          this.getDept();
          // this.getDept();
        },
        onSearch(val) {
          if(this.isClear==true){
            this.activeIndex=-1;            
            this.showContent = false;
            this.isSearch = false; 
            this.isClear=false
          }else{
            // this.isSearch = false;
          // this.isSearch = true;
            this.keyword = val;
            this.getPersons();
          }
          
          
          // if (!val) {
          //   this.isSearch = false;
          //   return false;
          // }
          // this.getPerson(val, 'prj', (res) => {
          //   this.searchList = res.data.data;
          //   if (res.data.data) {
          //     this.list = res.data.data
          //     this.list.forEach((item) => {
          //       item.leaf = true;
          //       item.showContent = true;
          //       item.showContent1 = true;
          //       item.showContent2 = true;
          //     });
          //     this.isSearch = true;
          //   }
          // })
        },
        //获取人员
        getPersons(){
          
          this.list = []
          this.userList5=[]
          this.userList4=[]
          // var params = '{"_method":"component.getListData","_param":{"bizObj":"PHONEBOOK","service":"selectMore","fields":"*","filter":"SYSPRJID ={sysLoginUser.projectId} and (USERNAME like \'%'+this.keyword+'%\' or \''+ this.keyword +'\'= \'\')   and (ADDRESS like \'%%\' or \'\'=\'\')   and (MOBILE like \'%%\' or \'\'=\'\')   and (UNIT like \'%%\' or \'\'=\'\')   and (FLAG like \'%%\' or \'\'=\'\') and  1=1 ","currentPageIndex":1,"pageSize":50,"orderList":[{"field":"FLAG","order":"desc"}],"QueryFormData":{"USERNAME":"'+this.keyword+'","label_TEXT1":"","UNIT":"","FLAG":" ","label_TEXT3":"","MOBILE":"","ADDRESS":""}}}'
 var params = {
       _method:"component.getListData",
       _param:{
          bizObj:"PHONEBOOK",
          service:"selectMore",
          fields:"*",
          filter:{
            phone:{
              USERNAME:'"'+ this.keyword + '"',
            }
          },
          currentPageIndex:1,
          pageSize:50,
          orderList:[{
            field:"FLAG",
            order:"desc"
            }],
          QueryFormData:""
       }
     }   
          this.$ajax({
            url : this.COMMON_URL, //+'?_objName=PHONEBOOK&_viewId=PhoneBook_list',
            method : 'post',
            // data : this.signMD5({
            //   FixJSON : params
            // })
            data : {
              FixJSON :JSON.stringify(params) 
            }
          }).then(res=>{
            console.log("search",res)
            this.searchList = res.data.datas
            //this.list.splice(0,this.list.length)
            //this.userList.splice(0,this.userList.length)
            this.list = []
            for(var i=0;i<this.searchList.length;i++){
              if(this.list.indexOf(this.searchList[i].DEPT) == -1){
                this.list.push(this.searchList[i].DEPT)
                this.list.sort((a,b)=>a.localeCompare(b,'zh'))
              }
              // if(i != this.searchList.length-1 && this.searchList[i].DEPT == this.searchList[i+1].DEPT){
              //   continue
              // }else{
              //   this.list.push(this.searchList[i].DEPT)
              // }
              
              // this.userList.push(this.searchList[i].USERNAME)
            }
              this.userList5=new Array(this.list.length)
              this.userList4=new Array(this.list.length)
              this.list.forEach(this.showAllUser)
          })
        },
        openInfo(item){
          this.$router.push({
            path:'/addressBook/personInfo',
            name:'personInfo',
            params:{
              item : item
            }
          })
        }
      },
      computed:{
        tree(){
          return this.$store.state.deptTree
        },
        // list(){
        //   return this.list.sort((a,b)=>{
        //     return a.localeCompare(b,'zh')
        //   })
        // }
      },
    }
</script>

<style scoped>
.photo{
    width:50px;
    height:50px;
    border-radius:50%;
}
.no_photo{
    width:50px;
    height:50px;
    background:linear-gradient(180deg,rgba(106,135,255,1),rgba(77,102,254,1));
    border-radius:50%;
    font-size:12px;
    font-family:PingFangSC-Regular;
    font-weight:400;
    color:rgba(255,255,255,1);
    line-height:20px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.dept_div{
  padding: 10px;
  border-bottom: 1px solid #eeeeee;
  display: flex;
  align-items: center;

}
.sup{
  width: 100%;
  height: 10px;
  border-radius: 0;
  background-color: #F5F5F5;
}
  .slide {
    padding: 0 20px;
    overflow: hidden;
    max-height: 0;
    transition: max-height .5s cubic-bezier(0, 1, 0, 1) -.1s;
  }
  .animate {
    max-height: 9999px;
    transition-timing-function: cubic-bezier(0.5, 0, 1, 0);
    transition-delay: 0s;
  }
  .person-name{
    padding-left: 20px;
  }
  .person-name-item{
    margin: 32px 0;
  }
  .person-name-item:first-child{
    margin-top: 22px;
  }
  .phoneBook{
    font-size:18px;
    font-family:PingFangSC-Semibold;
    font-weight:600;
    color:#ffffff;
    line-height:20px;
  }
  .dept{
    display: list-item;
    padding: 5px 0;
  }
  .person-list{
    position: relative;
    top: 15px;
  }
  .dept span{
    font-size:16px;
    font-family:PingFangSC-Regular;
    font-weight:400;
    color:#191919;
    line-height:20px;
  }
  .user{
    display: flex;
    padding: 10px;
    align-items: center;
    border-bottom: 1px solid #EEEEEE
  }
  /* .transition-view /deep/ .vux-header{
    background-color: #ffffff !important;
  }
   .transition-view /deep/ .vux-header .vux-header-left .left-arrow:before{
    border-color: #cccccc;
  }  */
    .moa-search-div{
    margin: 0 !important;
    padding: 12px 16px !important;
    width: 100% !important;
    background-color: #4D86FF !important;
        border : none !important;
    border-radius: 0px !important;
  }
</style>

